<template>
  <div >
    <p v-show="model.showTitle" class="search-component-title">{{model.title}}</p>
    <input type="text" 
           :style="{ width: model.inputWidth + 'px'}"
           :placeholder="model.placeholder"
           v-model="model.searchKey">
    <button :style="{width:model.btnWidth + 'px'}">{{model.btnText}}</button>
    <p class="search-result" v-show="model.showResult && model.searchKey !==''">根据关键词“<span>{{model.searchKey}}</span>”,
      共找到<span>{{model.totalNum}}</span>条结果</p>
  </div>
</template>

<script>
export default {
  name: 'search',
  props:['model']
}
</script>


<style scoped>
  *{
    font-family:'Noto Sans'
  }

  .search-component-title{
    font-weight:bold;
    font-size: 16px;
    margin-bottom: 5px ;
  }

  input{
    padding: 10px 10px;
    background-color: #ffffff;
    margin-right: 20px;
    border :none;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0,0, 0, 0.15);
    outline:none;
    font-size: 12px;
  }

  button{
    height: 36px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgba(74,146, 158, 0.4);
    font-size: 12px;
    color:white;
    background-color: #4a929e;
  }

  button:hover{
    cursor: pointer;
  }

  .search-result{
    font-size: 12px;
  }

  span{
    color: #866827;
  }

</style>
